<template>
  <div class="bgc">
    <div style="
                                                                                                                                                                                                                                                                                                                height: 4rem;
                                                                                                                                                                                                                                                                                                                line-height: 4rem;
                                                                                                                                                                                                                                                                                                                padding-left: 0.5rem;
                                                                                                                                                                                                                                                                                                                font-size: 1.5rem;
                                                                                                                                                                                                                                                                                                                font-weight: bold;
                                                                                                                                                                                                                                                                                                                color: black;
                                                                                                                                                                                                                                                                                                                background-color: #ffffff;
                                                                                                                                                                                                                         
                                                                                                                                                                                                                                                                                                              ">
      控制箱能耗数据分析:
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="类比" name="first">
        <div style="height: 5rem; border-radius: 5px">
          <el-form style="margin: 3rem; margin-top: 1rem; padding-top: 1rem" ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="">
              <el-cascader v-if="userType == 0" v-model="searchForm.companyId" placeholder="请选择公司名称" :options="companyArray" :props="{
                  checkStrictly: true,
                  value: 'id',
                  label: 'name',
                  children: 'childList',
                }" style="width: 150px" @change="changeTreeItem" clearable></el-cascader>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="searchForm.baseId" @change="changeBase" placeholder="请选择基地名称" style="width: 150px !important" clearable>
                <el-option v-for="item in baseArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select multiple v-model="searchForm.boxIds" clearable collapse-tags style="width: 150px !important" placeholder="请选择控制箱">
                <el-option v-for="item in boxsList" :key="item.fishpondId" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="">
              <el-date-picker v-model="searchForm.startAndEndTime" align="right" type="datetimerange" value-format=yyyy-MM-dd format=yyyy-MM-dd range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <div v-allow="'070501'" class="search-btn" @click="onSubmit"></div>
            </el-form-item>
            <el-form-item>
              <div v-allow="'070501'" class="reset-btn" @click="resetForm"></div>
            </el-form-item>
          </el-form>
        </div>
        <div style="font-size: 1.2rem;font-weight: bold; border-left: 0.5rem solid #4087f0;padding-left: 0.5rem;"> 图表模式
        </div>
        <div v-if="!show">
          <div class="box">
            <div class="main_box">
              <div class="title">
              </div>
              <echarts ref="echarts_water" style="margin: 2rem" id="5" :series="echartsList"></echarts>
            </div>
          </div>
        </div>
        <div v-if="show">
          <div>
            <div class="box">
              <div class="main_box">
                <div class="title">
                  <img style="margin-top: 15rem" src="@/assets/box/4.png" alt="" />
                </div>
                <echarts ref="echarts_water" style="margin: 2rem" id="2" :series="echartsList"></echarts>
              </div>
            </div>
          </div>

          <div>
            <div class="box">
              <div class="main_box">
                <div class="title">

                  <img style="margin-top: 15rem" src="@/assets/box/electricity.png" alt="">

                </div>
                <echarts ref="echarts_temperature" style="margin: 2rem" id="1" :series="echartsList"></echarts>
              </div>
            </div>
          </div>

        </div>
      </el-tab-pane>
      <el-tab-pane label="环比" name="second">
        <linkRelative></linkRelative>
      </el-tab-pane>

    </el-tabs>

  </div>
</template>
<script>
import linkRelative from './components/linkRelative'
import echarts from './components/echarts.vue'
import { getEnergyDataCharts } from '@/api/breeding'
import { getObjBoxs, getFishpondsByBoxId } from '@/api/system'
import mixin from '@/api/CompanyInfoTree.js'
import { async } from 'q'
export default {
  mixins: [mixin],
  components: {
    echarts,
    linkRelative
  },
  data() {
    return {
      activeName: 'first',
      userType: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      value2: '',
      choose: [],
      searchForm: {
        companyId: '',
        baseId: '',
        boxIds: '',
        startAndEndTime: ''
      },
      linecharts: '1',
      series: [],
      show: false,
      FishpondDevicesList: [],
      boxsList: [],
      echartsList: [],
      fishList: []
    }
  },
  created() {
    this.userType = Number(window.localStorage.getItem('userType'))
    this.searchForm.userType = this.userType
  },
  watch: {
    'searchForm.baseId': {
      handler(newValue, oldValue) {
        this.getObjBoxs()
      }
    }
  },
  // 初始化加载
  mounted() {
    this.userType = Number(window.localStorage.getItem('userType'))
    this.searchForm.userType = this.userType
  },
  methods: {
    // 获取日期
    getDates(val) {
      console.log(val)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    getIds(val) {
      this.fishList = val
    },
    // 改变控制箱获取鱼池
    getFish(val) {
      this.getObjBoxFishpondDevices(val)
      // let fishArray = []
      // fishArray.push(...this.fishList)
      // console.log(fishArray);
    },
    // 改变基地获取控制箱
    changeBase() {
      this.getObjBoxs()
      // this.getObjBoxFishpondDevices()
    },
    onSubmit() {
      if (this.searchForm.boxIds != '') {
        let water = {
          boxIds: this.searchForm.boxIds.join(','),
          startAndEndTime: this.searchForm.startAndEndTime.join(','),
          type: 0,
          model: 0
        }
        let temperature = {
          boxIds: this.searchForm.boxIds.join(','),
          startAndEndTime: this.searchForm.startAndEndTime.join(','),
          type: 1,
          model: 0
        }

        getEnergyDataCharts(water).then((res) => {
          if (res.code == 200) {
            // this.echartsList = res.data
            this.$refs.echarts_water.series = res.data
            this.$refs.echarts_water.getXY()
          }
        })
        getEnergyDataCharts(temperature).then((res) => {
          if (res.code == 200) {
            // this.echartsList = res.data
            this.$refs.echarts_temperature.series = res.data
            this.$refs.echarts_temperature.getXY()
          }
        })
        this.show = true
      } else {
        this.show = false
      }
    },

    // 重置
    resetForm() {
      this.searchForm = {
        companyId: '',
        baseId: '',
        boxs: '',
        ids: '',
        startAndEndTime: ''
      }
      this.onSubmit()
    },
    getObjBoxs() {
      getObjBoxs({ id: this.searchForm.baseId }).then((res) => {
        if (res.code == 200) {
          this.boxsList = res.data
        }
      })
    },
    getObjBoxFishpondDevices(id) {
      getFishpondsByBoxId({ id: id }).then((res) => {
        if (res.code == 200) {
          this.FishpondDevicesList = res.data
        }
      })
    },
    // 公司下拉切换
    changeTreeItem(val) {
      if (val) {
        this.searchForm.companyId = val[val.length - 1]
      } else {
        this.searchForm.companyId = ''
      }

      this.searchForm.baseId = ''
      this.baseArray = []

      // 获取角色列表
      this.getSysCompanyBases()
    }
  }
}
</script>
<style lang="less" scoped>
.text {
  width: 4rem;
  height: 22rem;
  writing-mode: vertical-rl;
  font-size: 1.5rem;
  position: relative;
  color: rgb(228, 47, 47);
  font-weight: bold;
}

.main_box {
  display: flex;
  margin-top: 2rem;
  width: 101%;
  border-radius: 30px;
  background-color: #ffffff;
  box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
}

.box {
  margin-left: 2rem;
  // margin: 5rem;
  margin-top: 0rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}

.bgc {
  background-color: #f4f8f9;
  min-height: 60rem;
}

/deep/.el-tabs__header {
  background-color: #ffffff;
}

/deep/.el-tabs__nav {
  margin-left: 1.5rem !important;
}
</style>
